<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogShow"
      width="900px"
      @close="close"
    >
      <el-row style="margin-left: -10px; margin-right: -10px">
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span
            >【题型】：{{
              list.questionType == 1
                ? "单选题"
                : list.questionType == 2
                ? "多选题"
                : "简答题"
            }}</span
          >
        </el-col>
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【编号】：{{ list.id }}</span>
        </el-col>
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span
            >【难度】：{{
              list.difficulty == 1
                ? "简单"
                : list.difficulty == 2
                ? "一般"
                : "困难"
            }}</span
          >
        </el-col>
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【标签】：{{ list.tags }}</span>
        </el-col>
      </el-row>
      <el-row style="margin-left: -10px; margin-right: -10px">
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【学科】：{{ list.subjectName }}</span>
        </el-col>
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【目录】：{{ list.directoryName }}</span>
        </el-col>
        <el-col :span="6" style="padding-left: 10px; padding-right: 10px">
          <span>【方向】：外{{ list.direction }}</span>
        </el-col>
      </el-row>
      <hr />
      <div>【题干】</div>
      <div style="color: rgb(64, 158, 255)">
        <p v-html="list.question"></p>
      </div>
      <div style="margin-bottom: 15px">
        {{
          list.questionType == 1
            ? "单选题"
            : list.questionType == 2
            ? "多选题"
            : "简答题"
        }}
        <span v-if="list.questionType != '3'">
          选项：（以下选中的选项为正确答案）</span
        >
      </div>
      <el-checkbox-group v-model="checkShow" v-if="list.questionType == '2'">
        <el-row v-for="item in options" :key="item.id" style="margin: 10px 0px">
          <el-checkbox :label="item.id"
            >{{ item.code }}--{{ item.title }}</el-checkbox
          >
        </el-row>
      </el-checkbox-group>
      <el-radio-group :value="show" v-if="list.questionType == '1'">
        <el-row
          v-for="item in list.options"
          :key="item.id"
          style="margin: 10px 0px"
        >
          <el-radio :label="item.id">{{ item.title }}</el-radio>
        </el-row>
      </el-radio-group>
      <hr />
      <div>
        【参考答案】：
        <el-button type="danger" @click="videoShow = !videoShow"
          >视频答案预览</el-button
        >
      </div>
      <div v-if="videoShow">
        <video :src="list.videoURL" controls></video>
      </div>
      <hr />
      <div>
        【答案解析】：
        <p v-html="list.answer"></p>
      </div>
      <hr />
      <div>
        【题目备注】：
        <p>{{ list.remarks }}</p>
      </div>
      <div style="display: flex; justify-content: end">
        <el-row type="flex" justify="end">
          <el-button @click="close">取 消</el-button>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "QuestionsInfo",
  data() {
    return {
      dialogShow: false,
      qureyData: {},
      list: [],
      videoShow: false,
      show: "",
      checkShow: [],
      options: [],
    };
  },
  methods: {
    async btnOK() {},
    initData() {},
    close() {
      this.list = [];
      this.dialogShow = false;
      this.videoShow = false;
      this.show = "";
      this.checkShow = [];
    },
  },
  mounted() {
    // this.initData();
  },
  created() {
    // this.initData();
  },
};
</script>

<style>
.el-dialog__header {
  background-color: #409eff !important;
}
</style>